<template>
  <div class="dialog-item">
    <div class="icon">
      <img src="" alt="" />
    </div>
    <div class="item-left">
      <div class="item-name">{{ title }}</div>
      <div class="tag">
        <span v-for="item in tags" :key="item.index">{{ item }}</span>
      </div>
      <div class="address">
        {{ address }}
      </div>
      <div class="imgs">
        <img v-for="item in imgurls" :key="item" :src="item" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
const { title, tags, address, imgurls } = defineProps({
  title: {
    type: String,
    required: true,
  },
  tags: {
    type: Array,
    required: true,
  },
  address: {
    type: String,
    required: true,
  },
  imgurls: {
    type: Array,
    required: true,
  },
});


</script>

<style scoped>
.dialog-item {
  display: flex;
}

.item-left .item-name {
  font-size: 0.9375vw;
  font-weight: 500;
  color: #ffefd8;
  line-height: 1.302083vw;
  letter-spacing: 1px;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.item-left .tag span {
  padding: 0.104167vw 0.520833vw;
  border: 1px solid #ffc854;
  color: #ffc854;
  border-radius: 0.15625vw;
  margin-right: 0.520833vw;
  margin-top: 0.260417vw;
  font-size: 0.625vw;
  display: inline-block;
}
.item-left .address {
  cursor: pointer;
  font-size: 0.729167vw;
  font-weight: 400;
  color: #ffefd8;
  line-height: 1.041667vw;
  letter-spacing: 1px;
  margin-top: 0.260417vw;
  margin-bottom: 0.260417vw;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-left .imgs {
  width: 4.583333vw;
  height: 4.583333vw;
  margin-right: 0.5vw;
  cursor: pointer;
  display: flex;
}
.item-left .imgs img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0.5vw;
  margin-right: 0.4vw;
}
</style>
